<template>
  <el-dialog
    :title="title"
    :visible="showDialog"
    width="630px"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item prop="name" label="合作商名称：" label-width="140px">
        <el-input
          v-model="form.name"
          maxlength="10"
          show-word-limit
          type="text"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item prop="contact" label="联系人：" label-width="140px">
        <el-input
          v-model="form.contact"
          maxlength="10"
          show-word-limit
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item prop="phone" label="联系电话：" label-width="140px">
        <el-input
          v-model="form.phone"
          maxlength="11"
          show-word-limit
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item prop="ratio" label="分成比例(%):" label-width="140px">
        <el-input-number
          v-model="form.ratio"
          controls-position="right"
          :min="0"
          :max="100"
          placeholder="请输入"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="footer">
        <el-button class="cancle" type="primary" @click="closeDialog">
          取消
        </el-button>
        <el-button class="confirm" type="primary" @click="submit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { updatePartner } from '@/api/pointManage/partner'
export default {
  name: 'HezuoDialog',
  data () {
    return {
      form: {
        name: '',
        contact: '',
        phone: '',
        ratio: ''
      },
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        contact: [{ required: true, message: '请输入', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的手机号',
            trigger: 'change'
          }
        ],
        ratio: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      showDialog: false,
      title: '修改合作商'
    }
  },
  methods: {
    async submit () {
      try {
        await this.$refs.form.validate()
        await updatePartner(this.form)
        this.$message.success('修改成功')
        this.closeDialog()
      } catch (err) {
        console.log(err)
      }
    },
    openDialog (row) {
      this.form = row
      this.showDialog = true
    },
    closeDialog () {
      this.showDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input-number {
  width: 396px;
  ::v-deep .el-input__inner {
    height: 36px;
  }
}

.el-input {
  width: 396px;
  height: 36px;
  ::v-deep .el-input__inner {
    height: 36px;
  }
}
::v-deep .el-dialog {
  border-radius: 10px;
}
::v-deep .el-dialog__body {
  padding: 20px 20px 30px;
}
::v-deep .el-dialog__footer {
  padding: 0;
  padding-bottom: 40px;
}
.last_form_item {
  margin: 0;
}
.footer {
  text-align: center;
}
.cancle {
  background-color: #fbf4f0 !important;
  color: #655b56 !important;
  border: none;
}
.confirm {
  margin-left: 34px !important;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  border: none;
}
</style>
